@use "variables" as *;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: $font-family;
  color: $text-primary;
  background-color: $background-primary;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page-container {
  padding: 20px;
}

// 全局动画类
.fade-enter-active,
.fade-leave-active {
  transition: opacity $transition-normal;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform $transition-normal, opacity $transition-normal;
}

.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

// Element Plus 样式覆盖
.el-card {
  border: 1px solid $app-border-color !important;
  border-radius: $app-border-radius !important;
  box-shadow: $shadow-sm !important;
  transition: all $transition-duration !important;

  &:hover {
    transform: translateY(-5px);
    box-shadow: $shadow-md !important;
  }
}

.el-button {
  border-radius: $radius-lg !important;
  font-weight: 500 !important;
  transition: all $transition-duration !important;

  &--primary {
    background: $gradient-primary !important;
    border: none !important;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba($primary-color, 0.3) !important;
    }
  }
}

// 暗黑模式
.dark {
  color-scheme: dark;
  background-color: $dark-background;
  color: $dark-text-primary;

  .el-card {
    background: $dark-card-background !important;
    border-color: $dark-border-color !important;
    
    &:hover {
      background: rgba(35, 35, 37, 0.8) !important;
    }
  }

  .el-button {
    &:not(.el-button--primary) {
      background: rgba(255, 255, 255, 0.1) !important;
      border-color: rgba(255, 255, 255, 0.2) !important;
      color: $dark-text-primary !important;

      &:hover {
        background: rgba(255, 255, 255, 0.15) !important;
      }
    }
  }

  .nav-header {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: $dark-border-color !important;
  }
}

// 全局过渡动画
.page-enter-active,
.page-leave-active {
  transition: all $transition-duration $transition-timing;
}

.page-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

// 卡片悬浮动画
.card-hover {
  transition: all $transition-duration $transition-timing;
  
  &:hover {
    transform: translateY(-8px) scale(1.02);
  }
} 